<!-- 登录注册 -->
<template>
  <div style="display: flex;">
    <div style="background-color: #f3f6ff; width: 50vw; height: 100vh;">
      <i style="padding: 2vh 0 0 2vw;" class="el-icon-d-arrow-left" @click="home()">返回</i>
      <div>
        <img src="../../assets/img/logo.png" style="margin-left: 5vw;" alt="">
      </div>
      <img src="../../assets/img/beijin.png" style="width: 30vw; margin-left: 10vw;" alt=""/>
    </div>


    <div style="width: 35vw; padding: 8vh 0 0 10vw;">

      <!-- 登录 -->
      <div style="margin: auto;" v-if="loginfales==0">
        <h1>欢迎回来！</h1>
        <h3 style="color: black;">请登录到您的账号。</h3>

        <div style="margin-top: 10vh;">
          <el-form label-width="60px" :rules="user_info_yz" :model="user_info">
            <el-form-item label="账号：" prop="username">
              <el-input v-model="user_info.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <br><br>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" show-password v-model="user_info.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <br><br>
            <div class="loginclass" @click="submitForm()">登录</div>
          </el-form>
          <br>
          <div class="loginButto" @click="loginfales=1">没有账号？立即注册</div>
        </div>
      </div>
      <!-- 注册 -->
      <div style="margin: auto;" v-if="loginfales==1">
        <h1>欢迎加入！</h1>
        <h3 style="color: black; font-size: 14px;">请注册您的账号。</h3>

        <div style="margin-top: 10vh;">
          <el-form label-width="70px" :rules="user_info_yz" :model="user_info">
            <el-form-item label="账号：" prop="username">
              <el-input v-model="user_info.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <br><br>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" show-password v-model="user_info.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <br><br>
            <el-form-item label="确认密码" prop="password">
              <el-input type="password" v-model="user_info.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <div class="loginclass" @click="Register()">注册</div>
          </el-form>
          <br>
          <div class="loginButto" @click="loginfales=0">已有账号？立即登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import md5 from 'js-md5'

export default {
  data() {
    var checkusername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        const reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){4,10}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("只能输入4-10位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种"));
        }
      }
    };
    return {
      user_info: {
        username: '',
        password: '',
        checkPass: ''
      },
      checkPass: '',
      loginfales: 0,
      user_info_yz: {
        username: [{validator: checkusername, trigger: "blur"}],
        password: [{validator: validatePass, trigger: "blur"}],
      },
    }
  },
  mounted(){
    console.log(md5('user123')) 
  },
  methods: {
    submitForm() {
      var that = this

      axios({
        method: 'get',
        url: 'api/Login',
        params: {
          Username: that.user_info.username,
          Password: that.user_info.password
        }
      }).then(function (res) {
        if (res.data != '') {
          sessionStorage.setItem('user_info', JSON.stringify(res.data))
          sessionStorage.setItem('Loginstate', JSON.stringify(1))
          that.$router.replace("/index/home")
        } else {
          that.$message({
            message: '请检查用户名或密码',
            type: 'warning'
          });
        }
      })
    },

    Register() {
      var that = this
      if (that.user_info.password == that.user_info.checkPass) {
        axios({
          method: 'get',
          url: 'api/register',
          params: {
            username: that.user_info.username,
            userpassword: that.user_info.password
          }
        }).then(function (res) {
          console.log(res)
          if (res.data === 1) {
            that.$message({
              message: '注册成功',
              type: 'warning'
            });
            that.loginfales = 0
          }

        })
      } else {
        console.log('密码不一致')
      }
    },
    home() {
      this.$router.replace("/index/home")
    }
  }
}
</script>

<style>
h1 {
  font-weight: 600;
  font-size: 36px;
}

h4 {
  margin-left: 3vw;
}

.loginclass {
  width: 25vw;
  height: 5.5vh;
  margin-left: 0.1vw;
  padding-top: 1.5vh;
  text-align: center;
  color: white;
  border-radius: 5px;
  background-color: #68cb9b;
  padding: 10px;
  transition: background-color 0.5s ease;
}

.loginButto {
  margin-left: 8vw;
  padding: 10px;
  transition: color 0.1s ease;
}

.loginButto:hover {
  color: aqua;
}

.loginclass:hover {
  background-color: #44ad7a;
}
</style>